<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超炫酷实用的动画插件anime.js实例分享DEMO5</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
	* {
	  box-sizing: border-box;
	}

	html,
	body {
		background: #18212D;
	}

	body {
	  position: absolute;
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  height: 100%;
	  padding: 1rem;
	  color: white;
		-webkit-font-smoothing: antialiased;
	}

	section {
	  display: flex;
	  flex-direction: column;
		position: relative;
	  width: 100%;
		max-width: 18rem;
	  margin: auto;
	  text-align: center;
	}

	h1 {
	  margin-bottom: 1rem;
	  font-size: 1.5rem;
	}

	article {
	  display: flex;
	  flex-direction: column;
		position: relative;
	  width: 100%;
	  min-height: 8rem;
	  margin-bottom: 1rem;
	  padding: 1rem;
	}

	.red {
	  background-color: #FF324A;
	}

	.green {
	  background-color: #31FFA6;
	}

	.blue {
	  background-color: #206EFF;
	}

	.yellow {
	  background-color: #FFFF99;
	}
	div.blue,div.green,div.red,div.yellow {
	  position: absolute;
	  top: .5rem;
	  left: .5rem;
	  width: 1rem;
	  height: 1rem;
	}
</style>
</head>
<body>
<div class="zzsc-container">
	<header class="zzsc-header">
		<div class="zzsc-demo center">
		  <a href="index.html">基本动画</a>
		  <a href="index2.html">多个timing值</a>
		  <a href="index3.html">指定目标值</a>
		  <a href="index4.html">动画控制</a>
		  <a href="index5.html" class="current">动画路径</a>
		</div>
	</header>
	
	<section>
	  <article>
		<svg width="256" height="112" viewBox="0 0 256 112">
		  <path fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
		</svg>
		<div class="div green"></div>
	  </article>
	</section>
</div>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<script src="js/stopExecutionOnTimeout.js" type="text/javascript"></script>
<script type="text/javascript" src="js/anime.min.js"></script>
<script type="text/javascript">
	var path = anime.path('path');
	anime({
		targets: '.div',
		translateX: path,
		translateY: path,
		rotate: path,
		duration: 3000,
		loop: true,
		easing: 'linear'
	});
	anime({
		targets: 'path',
		opacity: 0,
		duration: 6000,
		loop: true,
		direction: 'alternate',
		easing: 'easeInOutExpo'
	});
</script>
</body>
</html>